<template>
	<view>
		<view class="bg">
		</view>
		<view class="wrapper">
			<view class="middle">
				<view class="data1">
					<view class="left">
						<view class="text1">
							包裹尺寸
						</view>
						<view class="text2">
							选填
						</view>
					</view>
					<view class="right">
						单位：CM
					</view>
				</view>
				<view class="data2">
					包裹尺寸为商品打包后，实际包装箱的长宽高用于某些体 积重线路的运费计算
				</view>
				<view class="input_wrapper">
					<view class="input1">
						<u-input type="digit"
						 v-model="packageData.package_length"
						 input-align="center"
						 placeholder="长:CM"/>
					</view>
					<view class="input1 input2">
						<u-input type="digit"
						  v-model="packageData.package_width"
						  input-align="center"
						  placeholder="宽:CM"/>
					</view>
					<view class="input1 input2">
						<u-input type="digit"
						   v-model="packageData.package_height"
						   input-align="center"
						   placeholder="高:CM"/>
					</view>
				</view>
			</view>
			<view class="middle1">
				<u-form :model="packageData" label-width="200" :border-bottom="false"
				ref="uForm">
					<view class="middle_wrapper">
						<u-form-item label="重量(KG)" class="label" :border-bottom="false"
						prop="weigh"
						required="true">
							<u-input v-model="packageData.weigh" 
							input-align="right"
							placeholder="请输入重量"
							type="digit"/>
						</u-form-item>
					</view>
					<view class="middle_wrapper borderB">
						<u-form-item label="物品属性" class="label" :border-bottom="false"
						prop="shuxing"
						required="true">
							<u-input v-model="packageData.shuxing" 
							input-align="right"
							placeholder="请选择物品属性"
							/>
						</u-form-item>
					</view>
				</u-form>
			</view>
		</view>
		<view class="btn" @click="toFind">
			<button>立即查询</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				packageData:{
					weigh:"",
					shuxing:""
				},
				rules: {
					weigh: [
						{ 
							required: true, 
							message: '该选项必填', 
						}
					],
					shuxing: [
						{
							required: true, 
							message: '该选项必填', 
						},			
					],
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			toFind(){
				
			}
		}
	}
</script>

<style scoped>
.bg{
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background-color: #f1f1f1;
	z-index: -1;
}
.wrapper{
	padding: 30rpx;
}
.middle{
	padding: 30rpx 30rpx 10rpx 30rpx;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid rgba(151,151,151,0.2);
	border-top-left-radius: 10rpx;
	border-top-right-radius: 10rpx;
}
.data1{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.left{
	display: flex;
	align-items: center;
}
.text1{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.text2{
	font-size: 20rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
}
.right{
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #333333;
}
.data2{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: 5rpx;
}
.input_wrapper{
	display: flex;
	justify-content: space-between;
	padding-top:20rpx;
	padding-bottom: 10rpx;
	
}
.input1{
	background: #FFFFFF;
	border: 2rpx solid #F7CC46;
	border-radius: 10rpx;
	width: 30%;
}
.middle1{
	background-color: #FFFFFF;
	border-bottom-right-radius:10rpx ;
	border-bottom-left-radius:10rpx ;
}
.middle_wrapper{
	padding: 0 40rpx;
	border-bottom: 1px solid rgba(151,151,151,0.2);
}
.borderB{
	border-bottom: none;
}
.btn button{
	width: 690rpx;
	height: 80rpx;
	background: #F7CC46;
	border-radius: 40rpx;
	font-size: 34rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FDFBFB;
}
</style>
